<template>
  <vab-card shadow="never">
    <!-- 表头信息 -->
    <TabsMode
      v-if="tabsList.length > 1"
      :Key="tabsKey"
      :tabs-list="tabsList"
      :is-update="isUpdate"
      :is-delete="isDelete"
      @handle-copy="handleCopy"
      @handle-new="handleNew"
      @handle-tab="handleTab"
      @remove-tab="removeTab"
    />
    <template #header v-if="tabsList.length == 1 && tabsList[0]">
      <div class="card-header flex_sb">
        <span>{{ tabsList[0].label }}</span>
        <div v-if="props.isUpdate" class="flex">
          <vab-icon
            icon="file-copy-2-line"
            style="margin-right: 4px"
            @click="handleCopy()"
          />
          <vab-icon
            icon="add-box-line"
            style="margin-right: 4px"
            @click="handleNew()"
          />
        </div>
      </div>
    </template>
    <el-row v-for="(mode, mode_i) in list" :key="mode_i" :gutter="24">
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="发票抬头" prop="invoice_header">
          <el-input
            v-model="mode.invoice_header"
            :title="mode.invoice_header"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="纳税登记号" prop="social_credit_code">
          <el-input
            v-model="mode.social_credit_code"
            :title="mode.social_credit_code"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="开户银行" prop="bank_of_deposit">
          <el-input
            v-model="mode.bank_of_deposit"
            :title="mode.bank_of_deposit"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="银行账号" prop="bank_account">
          <span v-if="!isUpdate" class="default-text">
            {{ Encryption(mode.bank_account, 'bank_number') }}
          </span>
          <el-input
            v-else
            v-model="mode.bank_account"
            :title="mode.bank_account"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="开票银行电话" prop="invoicing_bank_phone">
          <span v-if="!isUpdate" class="default-text">
            {{ Encryption(mode.invoicing_bank_phone, 'phone') }}
          </span>
          <el-input v-else v-model="mode.invoicing_bank_phone" />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="开票通讯地址" prop="invoicing_bank_address">
          <el-input v-model="mode.invoicing_bank_address" />
        </el-form-item>
      </el-col>
      <el-col
        v-if="isCode"
        :span="8"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="8"
      >
        <el-form-item label="统一社会信用代码" prop="social_credit_code">
          <el-input v-model="mode.social_credit_code" />
        </el-form-item>
      </el-col>
      <vab-col>
        <el-form-item label="默认发票信息" prop="default_invoice_info">
          <el-radio-group v-model="mode.default_invoice_info">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </vab-col>
    </el-row>
  </vab-card>
</template>
<script lang="ts" setup>
  import TabsMode from '/@/views/corpManagement/corpCustomers/components/TabsMode.vue'
  import { Encryption, StrSplit } from '/@/utils/utils'
  const props: any = defineProps({
    list: {
      type: Array,
      required: true,
      default: [],
    } as any,
    isUpdate: {
      type: Boolean,
      required: true,
      default: false,
    },
    isCode: {
      type: Boolean,
      required: true,
      default: true,
    },
    tabsList: {
      type: Array,
      required: true,
      default: [],
    } as any,
    tabsKey: {
      type: String,
      default: '',
    },
  })
  // 是否可删除
  const isDelete = computed(() => {
    if (props.tabsList.length == 1) return false
    if (!props?.isUpdate) return false
    if (props?.isUpdate) return true
  })

  const emit = defineEmits([
    'handleCopy',
    'handleNew',
    'handleTab',
    'removeTab',
  ])

  // tab选择
  const handleTab = (key = '', index = 0) => {
    emit('handleTab', index)
  }
  // tab删除
  const removeTab = (key = '', index = 0) => {
    emit('removeTab', props.tabsKey, index)
  }
  // 复制
  const handleCopy = (key = '', index = 0) => {
    emit('handleCopy', props.tabsKey, index)
  }
  // 新建
  const handleNew = (key = '', index = 0) => {
    emit('handleNew', props.tabsKey, index)
  }
</script>
